<!--
 * @author: 十一
 * @since: 2024-08-26
 * layout-menu.vue
 * @desc: new page
-->
<template>
  <a-layout-sider
    v-model:collapsed="collapsed"
    :trigger="null"
    :style="{ background: publicConfigStore.algorithm ? '#000000' : '#ffffff' }"
  >
    <div class="logo" >
      <img src="@/assets/images/logo_01.png" alt="" srcset="" style="width: 30px;" v-if="collapsed">
      <img src="@/assets/images/logo.png" alt="" srcset="" style="width: 100px;" v-else>
    </div>
    <a-menu
      v-model:selectedKeys="selectedKeys"
      :openKeys="openKeys"
      theme="light"
      mode="inline"
    >
      <div v-for="item in routers" :key="item.path">
        <div v-if="item.meta && !item.meta.isHide">
          <a-menu-item
            v-if="
              item.children &&
              item.children.length <= 1 &&
              item.meta &&
              !item.meta.isHide
            "
          >
            <span
              class="flex items-center"
              @click="handleClickMenu(item, item)"
            >
              <i class="iconfont mr-2" :class="item.meta && item.meta.icon" ></i>
              <span v-if="!collapsed">{{ item.meta && item.meta.title }} </span>
            </span>
          </a-menu-item>
          <a-sub-menu :key="item.path" v-else>
            <template #title>
              <span class="flex items-center">
                <i
                  class="iconfont mr-2"
                  :class="item.meta && item.meta.icon"
                ></i>
                <span v-if="!collapsed">{{ item.meta && item.meta.title }} </span>
              </span>
            </template>
            <div v-for="children in item.children" :key="children.path">
              <a-menu-item
                :key="children.path"
                @click="handleClickMenu(children, item)"
                v-if="children.meta && !children.meta.isHide"
              >
                <span >{{ children.meta && children.meta.title }}</span>
              </a-menu-item>
            </div>
          </a-sub-menu>
        </div>
      </div>
    </a-menu>
  </a-layout-sider>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import emitter from "@/utils/mitt";
import { useRouter } from "vue-router";
import useMenuStore from "@/stores/modules/menu";
const menuStore = useMenuStore();
import usePublicConfigStore from "@/stores/modules/public-config";
const publicConfigStore = usePublicConfigStore();
const router = useRouter();
const routers = router.options.routes;

console.log(routers)

const openKeys = ref<string[]>(["/"]); //当前展开的 SubMenu 菜单项 key 数组
const selectedKeys = ref<string[]>(["/"]); //当前选中的菜单项 key 数组
selectedKeys.value = menuStore.selectedKeys;
openKeys.value = menuStore.openKeys;
const collapsed = ref<boolean>(false);

// 监听layout-header collapsed 状态
emitter.on("collapsed", (data: boolean) => {
  collapsed.value = data;
});
// 点击菜单
const handleClickMenu = (item: any, parentItem: any) => {
  openKeys.value = [parentItem.path];
  selectedKeys.value = [item.path];
  
  menuStore.selectedMenuItem = [parentItem ? parentItem : [], item];
  menuStore.selectedKeys = [item.path];
  menuStore.openKeys = [parentItem ? parentItem.path : ""];
  if (item.meta && item.meta.isLink) {
    window.open(item.meta.link);
  } else {
    router.push(item.path);
  }
};
</script>

<style scoped>
.logo {
  height: 32px;
  margin: 16px;
  /* background: rgba(0, 0, 0, 0.5); */
  text-align: center;
  line-height: 32px;
}
.logo img {
  margin: 0 auto;
}
.ant-layout .ant-layout-sider {
  /* background: #ffffff; */
}
.ant-menu {
  height: calc(100vh - 64px);
}
i {
  font-size: 20px;
}
</style>
